<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>Ajax练习</title>
    <link href="css/bootstrap-3.3.6.min.css" rel="stylesheet">
    <script src="js/jquery-2.2.0.js"></script>

    <style>
        body {
            font-family: "微软雅黑";
            font-size: 1.6em;
            color: #02177c;
            background: #b3d6ff;
        }
        a, .glyphicon {
            cursor: pointer;
            margin-right: 5px;
        }
        h3{
            text-align: center;
        }
        #resText, #resText2, #resText3{
            border:#666 1px solid;
            padding: 10px;
        }
        textarea{
            max-width: 100%;
        }
    </style>
</head>
<body>
<div class="container">
    <br>
    <h1>Ajax练习</h1>
    <hr>
    <br>
    <h3>Ajax的get方法</h3>
    <div class="row" >
        <div class="col-md-6 col-md-offset-3">
            <form action="#" id="formTest">
                <div class="form-group"><b>评论：</b></div>
                <div class="form-group">
                    <label for="name">姓名：</label>
                    <input class="form-control" id="name" value="爱因斯坦">
                </div>
                <div class="form-group">
                    <label for="content">内容：</label>
                    <textarea class="form-control" id="content">一个人的价值，应该看他贡献什么，而不应当看他取得什么。</textarea>
                </div>
                <input class="btn btn-success" id="send" type="button" value="获取Html">
                <input class="btn btn-success" id="send2" type="button" value="获取Xml">
                <input class="btn btn-success" id="send3" type="button" value="获取Json">
            </form>
            <br><br>
            <div class="well-sm"><b>以下是评论:</b></div>
            <h4>获取Html的值</h4>
            <div id="resText"></div>
            <h4>获取Xml的值</h4>
            <div id="resText2"></div>
            <h4>获取Json的值</h4>
            <div id="resText3"></div>
        </div>
    </div>
    <div style="height: 500px"></div>
</div>
<script>
$(function(){
    $("#send").click(function(){

        $.get("ajax/getHtml", {
            username: $("#name").val(),
            content: $("#content").val()
        },function(data,textStatus){
            alert(data);
            $("#resText").html(data);
        })
    });
    $("#send2").click(function(){
        $.get("ajax/getXml", {
            username: $("#name").val(),
            content: $("#content").val()
        },function(data,textStatus){
            alert(data);
            //使用.find("comment")命令，则对象的xml里面必须在comment外面套一层标签，否则无法访问
            var username = $(data).find("comment").attr("username");
            var content = $(data).find("comment content").text();
            var htmlContent = '<div class="panel panel-primary"><div class="panel-heading">'+username
                +'</div><div class="panel-body">'+content+'</div></div>'
            $("#resText2").html(htmlContent);
        })
    });
    $("#send3").click(function(){
        $.get("ajax/getJson", {
            username: $("#name").val(),
            content: $("#content").val()
        },function(data,textStatus){
            alert(data);
//            json中的花括号“{}”是必须不能少的。在下面获取属性值的时候，使用的是data对象的方法而非jQuery对象方法。
             var username = data.username;
            var content = data.content;
            var htmlContent = '<div class="panel panel-primary"><div class="panel-heading">'+username
                +'</div><div class="panel-body">'+content+'</div></div>'
            $("#resText3").html(htmlContent);
         },"json");
    })
})

</script>
<!--<div style="background: rgba(164, 255, 169, 0.34)">.</div>-->
</body>
</html>